{% extends "base.html" %}

{% block title %}用户中心 - 风之宿{% endblock %}

{% block content %}
<!-- 页面顶部面包屑导航 -->
<div class="container mx-auto px-4 py-4">
  <nav class="flex text-sm" aria-label="Breadcrumb">
    <ol class="inline-flex items-center space-x-1 md:space-x-3">
      <li class="inline-flex items-center">
        <a href="{{ url_for('index') }}" class="inline-flex items-center text-gray-500 hover:text-primary transition-colors duration-200">
          <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"></path>
          </svg>
          首页
        </a>
      </li>
      <li>
        <div class="flex items-center">
          <svg class="w-6 h-6 text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
          </svg>
          <span class="ml-1 text-gray-700 font-medium md:ml-2">用户中心</span>
        </div>
      </li>
    </ol>
  </nav>
</div>

<div class="container mx-auto px-4 py-6">
  <h1 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold text-primary mb-8 relative inline-block">
    用户中心
    <span class="absolute -bottom-2 left-0 w-1/3 h-1 bg-primary rounded-full"></span>
  </h1>

  <!-- 主体布局：响应式调整 -->
  <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
    <!-- 侧边栏：小屏幕顶部折叠，中大屏左侧固定 -->
    <div class="md:col-span-1">
      <div class="bg-white rounded-xl shadow-lg p-6 sticky top-6 transform transition-all duration-300 hover:shadow-xl">
        <!-- 用户信息卡片 -->
        <div class="flex flex-col items-center mb-8 pb-6 border-b border-gray-100">
          <div class="w-20 h-20 bg-gradient-to-br from-primary to-primary/70 rounded-full flex items-center justify-center text-white text-2xl font-bold mb-4 shadow-md">
            {{ session.username[0].upper() if session.username else 'U' }}
          </div>
          <h2 class="text-xl font-semibold text-gray-900">{{ session.username }}</h2>
          <p class="text-gray-500 text-sm mt-1">普通用户</p>
          <a href="{{ url_for('user.logout') }}" class="mt-4 text-sm text-red-600 hover:text-red-800 transition-colors flex items-center group">
            <svg class="w-4 h-4 mr-1 group-hover:scale-110 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H5a3 3 0 01-3-3V5a3 3 0 013-3h4a3 3 0 013 3v1"></path>
            </svg>
            退出登录
          </a>
        </div>

        <!-- 导航菜单：增加选中状态和图标 -->
        <nav class="space-y-1">
          <a href="#bookings" class="block py-3 px-4 bg-primary text-white rounded-lg transition-all duration-200 flex items-center">
            <svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
            </svg>
            我的预订
          </a>
          <a href="#bills" class="block py-3 px-4 text-gray-700 hover:bg-gray-50 rounded-lg transition-all duration-200 flex items-center group">
            <svg class="w-5 h-5 mr-3 group-hover:text-primary transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"></path>
            </svg>
            我的账单
          </a>
          <a href="#feedbacks" class="block py-3 px-4 text-gray-700 hover:bg-gray-50 rounded-lg transition-all duration-200 flex items-center group">
            <svg class="w-5 h-5 mr-3 group-hover:text-primary transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
            </svg>
            问题反馈
          </a>
          <a href="{{ url_for('user.book_room') }}" class="block py-3 px-4 text-gray-700 hover:bg-gray-50 rounded-lg transition-all duration-200 flex items-center group mt-6">
            <svg class="w-5 h-5 mr-3 group-hover:text-primary transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
            </svg>
            立即预订
          </a>
          <a href="{{ url_for('user.submit_feedback') }}" class="block py-3 px-4 text-gray-700 hover:bg-gray-50 rounded-lg transition-all duration-200 flex items-center group">
            <svg class="w-5 h-5 mr-3 group-hover:text-primary transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
            </svg>
            提交反馈
          </a>
        </nav>
      </div>
    </div>

    <!-- 主内容区：优化卡片布局与信息密度 -->
    <div class="md:col-span-3 space-y-8">
      <!-- 我的预订板块：增加图片预览与关键信息 -->
      <section id="bookings" class="bg-white rounded-xl shadow-lg p-6 transition-all duration-300 hover:shadow-xl transform hover:-translate-y-1">
        <div class="flex justify-between items-center mb-6">
          <h2 class="text-[clamp(1.3rem,3vw,1.8rem)] font-semibold text-primary flex items-center">
            <svg class="w-6 h-6 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
            </svg>
            我的预订
          </h2>
          <span class="text-sm text-gray-500 bg-gray-100 px-3 py-1 rounded-full">共 {{ bookings|length }} 条记录</span>
        </div>

        {% if bookings %}
          <div class="overflow-x-auto rounded-lg border border-gray-100">
            <table class="min-w-full divide-y divide-gray-100">
              <thead class="bg-gray-50">
                <tr>
                  <th class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">房间信息</th>
                  <th class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">日期</th>
                  <th class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">人数/金额</th>
                  <th class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
                  <th class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                </tr>
              </thead>
              <tbody class="bg-white divide-y divide-gray-100">
                {% for booking in bookings %}
                <tr class="hover:bg-gray-50 transition-colors duration-150">
                  <!-- 房间信息：增加图片预览 -->
                  <td class="px-6 py-4 whitespace-nowrap">
                    <div class="flex items-center">
                      {% if booking.room_image %}
                        <img src="{{ url_for('static', filename='uploads/' + room.image_url) }}"
                             alt="{{ booking.room_name }}"
                             class="w-12 h-12 object-cover rounded-md mr-3 shadow-sm transform transition-transform hover:scale-110">
                      {% else %}
                        <img src="{{ url_for('static', filename='images/default.jpeg') }}"
                             alt="默认房间"
                             class="w-12 h-12 object-cover rounded-md mr-3 bg-gray-100">
                      {% endif %}
                      <div>
                        <div class="text-sm font-medium text-gray-900">{{ booking.room_name }}</div>
                        <div class="text-xs text-gray-500">
                          {% if booking.room_type == 'standard' %}标准间
                          {% elif booking.room_type == 'deluxe' %}豪华间
                          {% elif booking.room_type == 'suite' %}套房
                          {% else %}家庭房{% endif %}
                        </div>
                      </div>
                    </div>
                  </td>
                  <!-- 日期：分行显示更清晰 -->
                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">
                    <div>入住: {{ booking.check_in }}</div>
                    <div>退房: {{ booking.check_out }}</div>
                  </td>
                  <!-- 新增人数与金额 -->
                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">
                    <div>{{ booking.guests }} 人</div>
                    <div class="text-primary font-medium">¥{{ booking.total_price }}</div>
                  </td>
                  <!-- 状态：中文显示 + 颜色优化 -->
                  <td class="px-6 py-4 whitespace-nowrap">
                    <span class="px-2.5 py-1 inline-flex text-xs leading-5 font-semibold rounded-full
                      {% if booking.status == 'confirmed' %}bg-green-100 text-green-800
                      {% elif booking.status == 'pending' %}bg-yellow-100 text-yellow-800
                      {% elif booking.status == 'cancelled' %}bg-red-100 text-red-800
                      {% elif booking.status == 'checked_in' %}bg-blue-100 text-blue-800
                      {% else %}bg-gray-100 text-gray-800{% endif %}">
                      {% if booking.status == 'confirmed' %}已确认
                      {% elif booking.status == 'pending' %}待确认
                      {% elif booking.status == 'cancelled' %}已取消
                      {% elif booking.status == 'checked_in' %}已入住
                      {% else %}其他{% endif %}
                    </span>
                  </td>
                  <!-- 操作：按状态显示不同按钮 -->
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                    {% if booking.status == 'pending' %}
                    <a href="{{ url_for('user.cancel_booking', booking_id=booking.id) }}"
                       class="text-red-600 hover:text-red-900 transition-colors flex items-center group"
                       onclick="return confirm('确定要取消该预订吗？取消后将无法恢复')">
                      <svg class="w-4 h-4 mr-1 group-hover:scale-110 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
                      </svg>
                      取消
                    </a>
                    {% elif booking.status == 'confirmed' %}
                    <a href="#" class="text-gray-500 cursor-not-allowed flex items-center">
                      <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                      </svg>
                      已确认
                    </a>
                    {% elif booking.status == 'checked_in' %}
                    <a href="#" class="text-gray-500 cursor-not-allowed flex items-center">
                      <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                      </svg>
                      已入住
                    </a>
                    {% else %}
                    <a href="#" class="text-gray-500 cursor-not-allowed flex items-center">
                      <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                      </svg>
                      已取消
                    </a>
                    {% endif %}
                  </td>
                </tr>
                {% endfor %}
              </tbody>
            </table>
          </div>
        {% else %}
          <!-- 空状态优化：增加插图与引导 -->
          <div class="flex flex-col items-center justify-center py-12 text-center">
            <div class="w-40 h-40 bg-gray-50 rounded-full flex items-center justify-center mb-6">
              <svg class="w-20 h-20 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
              </svg>
            </div>
            <h3 class="text-lg font-medium text-gray-700 mb-2">暂无预订记录</h3>
            <p class="text-gray-500 mb-6 max-w-md">您还没有任何预订，立即预订享受舒适住宿体验吧～</p>
            <a href="{{ url_for('user.book_room') }}"
               class="bg-primary text-white px-6 py-3 rounded-lg hover:bg-primary/90 transition-all duration-200 shadow-md hover:shadow-lg transform hover:-translate-y-0.5 flex items-center">
              <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
              </svg>
              立即预订房间
            </a>
          </div>
        {% endif %}
      </section>

      <!-- 我的账单板块：增加详情与筛选 -->
      <section id="bills" class="bg-white rounded-xl shadow-lg p-6 transition-all duration-300 hover:shadow-xl transform hover:-translate-y-1">
        <div class="flex justify-between items-center mb-6">
          <h2 class="text-[clamp(1.3rem,3vw,1.8rem)] font-semibold text-primary flex items-center">
            <svg class="w-6 h-6 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"></path>
            </svg>
            我的账单
          </h2>
          <span class="text-sm text-gray-500 bg-gray-100 px-3 py-1 rounded-full">共 {{ bills|length }} 条记录</span>
        </div>

        {% if bills %}
          <div class="overflow-x-auto rounded-lg border border-gray-100">
            <table class="min-w-full divide-y divide-gray-100">
              <thead class="bg-gray-50">
                <tr>
                  <th class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">账单编号</th>
                  <th class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">关联预订</th>
                  <th class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">金额</th>
                  <th class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
                  <th class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                </tr>
              </thead>
              <tbody class="bg-white divide-y divide-gray-100">
                {% for bill in bills %}
                <tr class="hover:bg-gray-50 transition-colors duration-150">
                  <!-- 账单编号：便于核对 -->
                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">
                    <div class="font-mono">#{{ "%06d"|format(bill.id) }}</div>
                    <div class="text-xs text-gray-500 mt-1">{{ bill.created_at }}</div>
                  </td>
                  <!-- 关联预订信息 -->
                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">
                    <div>{{ bill.room_name }}</div>
                    <div class="text-xs text-gray-500 mt-1">
                      {{ bill.check_in }} 至 {{ bill.check_out }}
                    </div>
                  </td>
                  <!-- 金额信息：突出显示 -->
                  <td class="px-6 py-4 whitespace-nowrap">
                    <div class="text-lg font-semibold text-gray-900">¥{{ bill.amount }}</div>
                    {% if bill.discount and bill.discount > 0 %}
                    <div class="text-xs text-green-600 flex items-center">
                      <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                      </svg>
                      已优惠 ¥{{ bill.discount }}
                    </div>
                    {% endif %}
                  </td>
                  <!-- 账单状态 -->
                  <td class="px-6 py-4 whitespace-nowrap">
                    <span class="px-2.5 py-1 inline-flex text-xs leading-5 font-semibold rounded-full
                      {% if bill.status == 'paid' %}bg-green-100 text-green-800
                      {% elif bill.status == 'refunded' %}bg-blue-100 text-blue-800
                      {% else %}bg-yellow-100 text-yellow-800{% endif %}">
                      {% if bill.status == 'paid' %}已支付
                      {% elif bill.status == 'refunded' %}已退款
                      {% else %}待支付{% endif %}
                    </span>
                  </td>
                  <!-- 账单操作 -->
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                    {% if bill.status == 'pending' %}
                    <a href="{{ url_for('user.pay_bill', bill_id=bill.id) }}"
                       class="text-primary hover:text-primary/80 transition-colors mr-3 flex items-center group">
                      <svg class="w-4 h-4 mr-1 group-hover:scale-110 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path>
                      </svg>
                      支付
                    </a>
                    <a href="#" class="text-gray-500 hover:text-gray-700 transition-colors flex items-center group">
                      <svg class="w-4 h-4 mr-1 group-hover:scale-110 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path>
                      </svg>
                      详情
                    </a>
                    {% else %}
                    <a href="#" class="text-gray-500 hover:text-gray-700 transition-colors mr-3 flex items-center group">
                      <svg class="w-4 h-4 mr-1 group-hover:scale-110 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path>
                      </svg>
                      详情
                    </a>
                    <a href="{{ url_for('user.download_invoice', bill_id=bill.id) }}"
                       class="text-gray-600 hover:text-gray-900 transition-colors flex items-center group">
                      <svg class="w-4 h-4 mr-1 group-hover:scale-110 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"></path>
                      </svg>
                      发票
                    </a>
                    {% endif %}
                  </td>
                </tr>
                {% endfor %}
              </tbody>
            </table>
          </div>
        {% else %}
          <!-- 账单空状态 -->
          <div class="flex flex-col items-center justify-center py-12 text-center">
            <div class="w-40 h-40 bg-gray-50 rounded-full flex items-center justify-center mb-6">
              <svg class="w-20 h-20 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"></path>
              </svg>
            </div>
            <h3 class="text-lg font-medium text-gray-700 mb-2">暂无账单记录</h3>
            <p class="text-gray-500 mb-6 max-w-md">您还没有任何账单记录，完成预订后将在此显示</p>
            <a href="{{ url_for('user.book_room') }}"
               class="bg-primary text-white px-6 py-3 rounded-lg hover:bg-primary/90 transition-all duration-200 shadow-md hover:shadow-lg transform hover:-translate-y-0.5 flex items-center">
              <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
              </svg>
              浏览可预订房间
            </a>
          </div>
        {% endif %}
      </section>

      <!-- 问题反馈板块：优化展示与交互 -->
      <section id="feedbacks" class="bg-white rounded-xl shadow-lg p-6 transition-all duration-300 hover:shadow-xl transform hover:-translate-y-1">
        <div class="flex justify-between items-center mb-6">
          <h2 class="text-[clamp(1.3rem,3vw,1.8rem)] font-semibold text-primary flex items-center">
            <svg class="w-6 h-6 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
            </svg>
            问题反馈
          </h2>
          <span class="text-sm text-gray-500 bg-gray-100 px-3 py-1 rounded-full">共 {{ feedbacks|length }} 条记录</span>
        </div>

        {% if feedbacks %}
          <div class="space-y-6">
            {% for feedback in feedbacks %}
            <div class="border border-gray-100 rounded-xl p-5 hover:shadow-md transition-all duration-300 transform hover:-translate-y-1 bg-white">
              <div class="flex justify-between items-start">
                <h3 class="text-lg font-medium text-gray-900">{{ feedback.title }}</h3>
                <span class="px-2.5 py-1 inline-flex text-xs leading-5 font-semibold rounded-full
                  {% if feedback.status == 'resolved' %}bg-green-100 text-green-800
                  {% elif feedback.status == 'processing' %}bg-blue-100 text-blue-800
                  {% else %}bg-yellow-100 text-yellow-800{% endif %}">
                  {% if feedback.status == 'resolved' %}已解决
                  {% elif feedback.status == 'processing' %}处理中
                  {% else %}待处理{% endif %}
                </span>
              </div>

              <div class="mt-3 bg-gray-50 p-4 rounded-lg text-gray-700 text-sm border border-gray-100">
                {{ feedback.description }}
              </div>

              <div class="mt-4 flex justify-between items-center">
                <div class="text-sm text-gray-500">
                  提交时间: {{ feedback.created_at }}
                </div>

                {% if feedback.status == 'resolved' and feedback.reply %}
                <button class="text-primary text-sm hover:underline flex items-center group" onclick="toggleReply({{ feedback.id }})">
                  <svg class="w-4 h-4 mr-1 transition-transform group-hover:rotate-180 duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                  </svg>
                  查看回复
                </button>
                {% endif %}
              </div>

              <!-- 反馈回复：默认隐藏，点击查看时显示 -->
              {% if feedback.status == 'resolved' and feedback.reply %}
              <div id="reply-{{ feedback.id }}" class="mt-4 hidden bg-blue-50 p-4 rounded-lg border border-blue-100 animate-fadeIn">
                <div class="text-sm font-medium text-blue-800 mb-1">客服回复:</div>
                <div class="text-sm text-blue-700">{{ feedback.reply }}</div>
                <div class="text-xs text-blue-500 mt-2">回复时间: {{ feedback.resolved_at }}</div>
              </div>
              {% endif %}
            </div>
            {% endfor %}
          </div>
        {% else %}
          <!-- 反馈空状态 -->
          <div class="flex flex-col items-center justify-center py-12 text-center">
            <div class="w-40 h-40 bg-gray-50 rounded-full flex items-center justify-center mb-6">
              <svg class="w-20 h-20 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
              </svg>
            </div>
            <h3 class="text-lg font-medium text-gray-700 mb-2">暂无问题反馈记录</h3>
            <p class="text-gray-500 mb-6 max-w-md">您还没有提交任何反馈，有任何问题请告诉我们</p>
            <a href="{{ url_for('user.submit_feedback') }}"
               class="bg-primary text-white px-6 py-3 rounded-lg hover:bg-primary/90 transition-all duration-200 shadow-md hover:shadow-lg transform hover:-translate-y-0.5 flex items-center">
              <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
              </svg>
              提交反馈
            </a>
          </div>
        {% endif %}
      </section>
    </div>
  </div>
</div>

<!-- 用于控制反馈回复显示/隐藏的脚本 -->
<script>
// 切换反馈回复的显示/隐藏
function toggleReply(feedbackId) {
  const replyElement = document.getElementById(`reply-${feedbackId}`);
  if (replyElement) {
    replyElement.classList.toggle('hidden');
  }
}

// 平滑滚动到锚点
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
  anchor.addEventListener('click', function (e) {
    e.preventDefault();
    const targetId = this.getAttribute('href');
    const targetElement = document.querySelector(targetId);

    if (targetElement) {
      window.scrollTo({
        top: targetElement.offsetTop - 20,
        behavior: 'smooth'
      });

      // 添加临时高亮效果
      targetElement.classList.add('bg-primary/5');
      setTimeout(() => {
        targetElement.classList.remove('bg-primary/5');
      }, 1000);
    }
  });
});

// 添加页面加载动画
document.addEventListener('DOMContentLoaded', function() {
  const sections = document.querySelectorAll('section');

  sections.forEach((section, index) => {
    section.style.opacity = '0';
    section.style.transform = 'translateY(20px)';
    section.style.transition = 'opacity 0.5s ease, transform 0.5s ease';

    setTimeout(() => {
      section.style.opacity = '1';
      section.style.transform = 'translateY(0)';
    }, 100 + (index * 100));
  });
});

// 添加自定义动画样式
const style = document.createElement('style');
style.textContent = `
  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .animate-fadeIn {
    animation: fadeIn 0.3s ease forwards;
  }
`;
document.head.appendChild(style);
</script>
{% endblock %}